<template>
  <div id="map" class="map-container"></div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import { onMounted } from "vue";
import "ol/ol.css";

export default {
  setup() {
    onMounted(() => {
      new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              tileUrlFunction(tile) {
                console.log(tile);
                return `C:/Users/86159/Desktop/resoult/cutImage/256/${tile[0]}/tile-${tile[1]}_${tile[2]}.png`;
              },
              // url: '/tiles/{z}/tile-{x}_{-y}.png',
              maxZoom: 10,
              minZoom: 4,
            }),
          }),
        ],
        view: new View({
          center: fromLonLat([-180, 90]),
          zoom: 6,
        }),
      });
    });
  },
};
</script>

<style>
.map-container {
  height: 100%;
}
</style>